<template>
  <div class="movies">
    <img :src="img.img" width="214px" height="297px" class="img--mo">
    <div class="desc-mo">
      <div class="numtitle">
        <p class="num">{{img.personNum}}</p>
        <p>人想看</p>
      </div>
      <div class="nametitle">
        {{img.moviename}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    img: {
      type: Object,
      default: {}
    }
  }
}
</script>
<style scoped lang="scss">
.movies{
  width: 214px;
  margin: 0 10px;
  height: 297px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.desc-mo{
  width: 100%;
  height: 100px;
  position: absolute;
  color: #fff;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.numtitle{
  padding-left: 10px;
  width: 204px;
  height: 30px;
  display: flex;
  font-size: 12px;
  p {
    line-height: 30px;
  }
}
.num{
  font-size: 16px;
  font-width: 500;
  color: #FD9827;
  margin-right: 7px;
}
.nametitle{
  padding-left: 10px;
  width: 204px;
  height: 30px;
  font-size: 16px;
  font-width: 500;
}
.ll{

}
</style>
